<template>
  <div class="x-product-card">
    <div class="_pic" @click="handleToDetail">
      <n-image :src="formatCdn(detail.productMainPic, 400)" style="flex: 1" preview-disabled object-fit="cover" />
    </div>
    <div class="_info">
      <div class="_title" @click="handleToDetail">
        <n-ellipsis>
          {{ detail.productTitle }}
        </n-ellipsis>
      </div>
      <div class="_tags">
        <em v-for="tag in productLabel" :key="tag">{{ tag }}</em>
      </div>
      <dl>
        <dt>
          <n-ellipsis> ID：{{ detail.id }} </n-ellipsis>
        </dt>
        <dd @click.stop="handleToClipboard(detail.id)">复制</dd>
      </dl>
      <dl>
        <dt>
          供货价：
          <span class="warning"> {{ costPrice }} </span>
        </dt>
      </dl>
      <dl class="sales">
        <dt v-if="detail.salesNum >= 100"> 销量：{{ detail.salesNum }} </dt>
      </dl>
      <div class="_button">
        <x-button type="primary" @click.stop="handleToWeixin">合作咨询</x-button>
        <x-button :disabled="detail.publishingStatus === 1" type="primary" @click.stop="handleCreateProduct">
          {{ detail.publishingStatus ? '已发布' : '发布同款' }}
        </x-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, reactive, toRefs } from 'vue'
  import { NImage, NEllipsis } from 'naive-ui'
  import { XButton } from '@/components'
  import { formatZero, formatCdn } from '@/utils'
  import { useRouter } from 'vue-router'
  import { useClipboard } from '@/hooks'

  export default defineComponent({
    name: 'XProductCard',
    components: {
      NImage,
      NEllipsis,
      XButton
    },
    props: {
      detail: {
        type: Object,
        default: () => {}
      }
    },
    setup($props) {
      const { toClipboard } = useClipboard()
      const $router = useRouter()
      const $state = reactive({
        ...toRefs($props),
        productLabel: computed(() => {
          return $props.detail?.productLabelArray || []
        }),
        costPrice: computed(() => {
          const { minCostPrice, maxCostPrice } = $props.detail
          if (minCostPrice) {
            const price = [`￥${formatZero(minCostPrice)}`]
            if (maxCostPrice > minCostPrice) {
              price.push(`￥${formatZero(maxCostPrice)}`)
            }
            return price.join('-')
          } else {
            return '-'
          }
        })
      })

      const handleCreateProduct = () => {
        if (!$state.detail.publishingStatus) {
          $router.push({
            name: 'ProductDetail',
            query: {
              type: 'tmpl',
              templateId: $state.detail.id
            }
          })
        }
      }

      const handleToDetail = () => {
        $router.push({
          name: 'ProductTemplatePreview',
          query: {
            id: $state.detail.id
          }
        })
      }

      // 复制物流编号
      const handleToClipboard = (value: string) => {
        toClipboard(value)
      }

      const handleToWeixin = () => {
        window.open('https://work.weixin.qq.com/kfid/kfc33de6da09c232a74')
      }

      return {
        ...toRefs($state),
        formatCdn,
        handleCreateProduct,
        handleToDetail,
        handleToWeixin,
        handleToClipboard
      }
    }
  })
</script>

<style lang="scss">
  .x-product-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    background-color: #daddf4;
    transition: 0.2s;

    &:hover {
      box-shadow: 0 0 5px rgba(83, 111, 255, 0.5);
      border-color: #536fff;
      ._pic {
        img {
          transform: scale(1.1);
        }
      }
    }

    ._pic {
      width: 100%;
      height: 200px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      overflow: hidden;
      img {
        transition: 0.2s;
        width: 100%;
      }
    }

    ._info {
      background-color: #fff;
      padding: 8px;
      font-size: 13px;
      ._title {
        color: #333639;
        cursor: pointer;
        font-size: 15px;
      }
      ._tags {
        padding: 5px 0;
        overflow: hidden;
        height: 60px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0px, 1fr));
        gap: 4px;
        em {
          font-size: 12px;
          font-style: normal;
          display: inline-block;
          height: 22px;
          color: #f7541e;
          border: 1px solid #f7541e;
          border-radius: 3px;
          padding: 1px 4px;
          white-space: nowrap;
          text-align: center;
        }
      }
      dl {
        padding-top: 5px;
        display: flex;
        align-items: center;
        .warning {
          color: #f7541e;
        }
        dt {
          flex: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        dd {
          padding: 0 4px;
          color: #536fff;
          cursor: pointer;
        }
        &.sales {
          height: 30px;
          overflow: hidden;
        }
      }
      ._button {
        padding-top: 5px;
        padding-bottom: 10px;
        display: flex;
        .x-button {
          flex: 1;
        }
      }
    }
  }
</style>
